<div
  class="yby-steps"
  [ngStyle]="{
    width: stepsWidth
  }"
>
  <ng-container *ngFor="let step of steps;let i=index;">
    <div
      class="yby-steps-item"
      [ngClass]="{
        'finish': i+startIndex < current,
        'current': i+startIndex===current,
        'wait': i+startIndex > current,
        'has-change': hasChange,
        'disabled': isDisabled(step, i+startIndex)
      }"
    >
      <div class="yby-steps-item-content" (click)="!isDisabled(step, i+startIndex) && stepChange.emit(i+startIndex)">
        <div class="yby-steps-item-icon">
          {{i+startIndex}}
        </div>
        <div class="yby-steps-item-title" nz-tooltip [nzTooltipTitle]="step.tooltip">
          <ng-container *nzStringTemplateOutlet="step.title">{{ step.title }}</ng-container>
        </div>
      </div>
    </div>
  </ng-container>
</div>
